<template>
  <div class="table">
    <el-table v-loading="listLoading"
              ref="elTable"
              :element-loading-text="loadingText"
              :row-key="rowkey"
              @selection-change="handleSelectionChange"
              @expand-change="handleExpandChange"
              v-bind="$attrs"
              v-if="showTable"
              style="margin-bottom:10px;">
      <slot></slot>
    </el-table>
    <el-pagination class="pagination"
                   v-if="pagination"
                   :layout="pageLayout"
                   :total="paginationTotal"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :page-sizes="pageSizes"
                   @size-change="sizeChange"
                   @current-change="pageChange"
                   :class="align">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'vTable',
  props: {
    download: {
      type: Boolean,
      default: false
    },
    listLoading: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    loadingText: {
      type: String,
      default: function () {
        return this.$t('loading')
      }
    },
    rowkey: {
      type: String,
      default: function () {
        return 'id'
      }
    },
    pagination: Boolean,
    paginationAlign: String,
    pageSize: {
      type: Number,
      default: function () {
        return 10
      }
    },
    pageSizes: {
      type: Array,
      default: function () {
        return [10, 50, 100]
      }
    },
    paginationTotal: {
      type: Number,
      default: function () {
        return 10
      }
    },
    pageLayout: {
      default: function () {
        return 'total, sizes, prev, pager, next, jumper'
      }
    },
    showTable: {
      type: Boolean,
      default: function () {
        return true
      }
    }
  },
  computed: {
    align () {
      let res
      switch (this.paginationAlign) {
        case 'right':
          res = 'textR'
          break
        case 'center':
          res = 'textC'
          break
        default:
          res = ''
      }
      return res
    }
  },
  methods: {
    sizeChange (size) {
      this.$emit('pageSizeChange', size)
    },
    pageChange (curPage) {
      this.currentPage = curPage
      this.$emit('currentPageChange', curPage)
    },
    restPage () {
      this.currentPage = 1
    },
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    handleExpandChange (row, expandData) {
      this.$emit('expandChange', row, expandData)
    }
  },
  data () {
    return {
      currentPage: 1
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination {
  margin-top: 10px;
  text-align: left;
}
/deep/ .pagination .el-pagination__editor {
    font-size: 13px !important;
  }
// 重置table选择页数下拉框的颜色
/deep/ .el-pagination__sizes .el-input .el-input__inner:hover {
  border-color:#fe8466;
}
</style>
